<template xlang="wxml">
<view>
	<view class="container"  >
			<picker-color :isShow="showPickerColor" :bottom="0"  @callback='getPickerColor' />
		<view class="uni-padding-wrap">
			<view class="uni-title">请输入要生成的二维码</view>
		</view>
		
			<input class="uni-input" placeholder="请输入要生成的二维码内容" v-model="val" />
		
		
		<view class="qrimg">
			<view class="qrimg-i">
				<tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
			</view>
			<!-- <view class="qrimg-i">
				<tki-qrcode v-if="ifShow" cid="qrcode2" ref="qrcode2" val="第二个二维码" :size="size" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
			</view> -->
		</view>

	
		<!-- <view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title">设置二维码大小</view>
		</view> -->
		<view class="body-view">
			<slider :value="size" @change="sliderchange" min="200" max="400" show-value />
		</view>
	
		<view class="uni-padding-wrap">
			<view    class="button-sp-area">
				<button class="mini-btn" data-id="background"  size="mini" type="primary"  @tap="showPickerColorPop">背景颜色</button>
				<button class="mini-btn" data-id="foreground" size="mini" type="primary"  @tap="showPickerColorPop">前景颜色</button>
				<button class="mini-btn" data-id="pdground" size="mini" type="primary"  @tap="showPickerColorPop">角景颜色</button>
				<button class="mini-btn" size="mini" type="primary" @tap="selectIcon">选择二维码图标</button>
				<button class="mini-btn" size="mini" type="primary" @tap="creatQrcode">生成二维码</button>
				<button class="mini-btn" size="mini" type="primary" @tap="saveQrcode">保存到图库</button>
				<button class="mini-btn" size="mini" type="primary" @tap="clearQrcode">清除二维码</button>
				<!-- <button class="mini-btn" size="mini" type="warn" @tap="ifQrcode">显示隐藏二维码</button> -->
			</view>
		</view>
	<!-- #ifdef MP-QQ -->
    <view class="adContainer">
	<ad  unit-id="49fbbff61639d5c62ace1745f1f019b0" type="feeds"></ad>
    </view>
    <!-- #endif  -->

	<!-- #ifdef MP-WEIXIN  -->
      <view class="adContainer">
       <ad  unit-id="adunit-8ef9c266b9ad1ab8"  bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
     </view>
    <!-- #endif  --></view>

		</view>
</template>
<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
import pickerColor from "@/components/helang-pickerColor/helang-pickerColor.vue"
export default {
	data() {
		return {
			ifShow: true,
			val: '爱上歆随懿恫的博客', // 要生成的二维码值
			size: 300, // 二维码大小
			unit: 'upx', // 单位
			background: '#fff', // 背景色
			foreground: 'rgb(45, 183, 245)', // 前景色
			pdground: '#32dbc6', // 角标色
			icon: '', // 二维码图标
			iconsize: 40, // 二维码图标大小
			lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
			onval: false, // val值变化时自动重新生成二维码
			loadMake: true, // 组件加载完成后自动生成二维码
			src: "" ,
			// 二维码生成后的图片地址或base64
			//颜色选择
			  buttonColor:"#0099FF",
            showPickerColor:false,
			bottomPickerColor:0,
			setpic:''
		}
	},
	methods: {
		sliderchange(e) {
			this.size = e.detail.value
		},
		creatQrcode() {
			this.$refs.qrcode._makeCode()
		},
		saveQrcode() {
			this.$refs.qrcode._saveCode()
		},
		qrR(res) {
			this.src = res
		},
		clearQrcode() {
			this.$refs.qrcode._clearCode()
			this.val = ''
		},
		ifQrcode() {
			this.ifShow = !this.ifShow
		},
		selectIcon() {
			let that = this
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function (res) {
					that.icon = res.tempFilePaths[0]
					setTimeout(() => {
						that.creatQrcode()
					}, 100);
					// console.log(res.tempFilePaths);
				}
			});
		},
		        /* 显示获取颜色选择弹窗 */
        showPickerColorPop(e){
			console.log(e)
		this.setpic=	e.currentTarget.dataset.id;
            this.showPickerColor=true;
        },
        /* 获取颜色选择回调 */
        getPickerColor(color){
				let that = this
            /* 隐藏弹窗 */
            this.showPickerColor=false;
            /* 判断颜色值是否有效 */
            if(color){
				if(that.setpic=="background"){
				this.background=color;
				}
				if(that.setpic=="foreground"){
				this.foreground=color;
				}
				if(that.setpic=="pdground"){
				this.pdground=color;
				}
			
						setTimeout(() => {
						that.creatQrcode()
					}, 100);
                console.log('选择的颜色值是：'+color);
            }
        }
	},
	components: {
		tkiQrcode,
		"picker-color":pickerColor,
	},
	onLoad: function () { },

}
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.qrimg {
	display: flex;
	justify-content: center;
	height: 200px;
}
.qrimg-i{
	margin-right: 10px;
}
slider {
	width: 90%;
}
input {
	width: 99%;
	margin: 10upx;
}

button {
	width: 45%;
	margin: 5upx;
} 
</style>